<!-- 
 * 公共搜索组件
 * @author: 
 * @since: 2022-04-08
 * index.vue
-->
<template>
  <div class="filters-com-container">
    <el-form :model="formModel" class="search-form" :inline="true">
      <el-row class="form-filters" :class="[isShowFold ? '' : 'hide']" ref="box">
        <el-col v-for="(item, index) in formLabel" :key="index" span="">
          <el-form-item :label="item.label + ':'" v-if="item.type === 'text'" :label-width="item.labelWidth ? item.labelWidth + 'px' : ''">
            <el-input v-model="formModel[item.model]" v-bind="item.attrs" @change="item.change ? emitCom(item.change) : ''" @click="item.click ? emitCom(item.click) : ''" :placeholder="item.placeholder" clearable :style="{ width: item.width + 'px' }" size="mini"></el-input>
          </el-form-item>
          <el-form-item :label="item.label + ':'" v-if="item.type === 'number'" :label-width="item.labelWidth ? item.labelWidth + 'px' : ''">
            <el-input v-model="formModel[item.model]" v-bind="item.attrs" @change="item.change ? emitCom(item.change) : ''" @click="item.click ? emitCom(item.click) : ''" :placeholder="item.placeholder" clearable :style="{ width: item.width + 'px' }" size="mini" type="number"></el-input>
          </el-form-item>
          <el-form-item :label="item.label + ':'" v-if="item.type === 'select'" :label-width="item.labelWidth ? item.labelWidth + 'px' : ''">
            <el-select
              v-model="formModel[item.model]"
              :placeholder="item.placeholder"
              :style="{
                width: item.width + 'px',
              }"
              size="mini"
              @change="emitCom(item.change, formModel[item.model])"
            >
              <el-option v-for="optionItem in item.option" :key="optionItem.value" :label="optionItem.key" :value="optionItem.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="item.label + ':'" :label-width="item.labelWidth ? item.labelWidth + 'px' : ''" v-if="item.type === 'datetimerange'" label-position="right">
            <el-date-picker v-model="formModel[item.model]" type="datetimerange" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" value-format="YYYY-MM-DD hh:mm:ss" :style="{ width: item.width + 'px' }" :default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 2, 1, 23, 59, 59)]"></el-date-picker>
          </el-form-item>
          <el-form-item :label="item.label + ':'" v-if="item.type === 'date'" :label-width="item.labelWidth ? item.labelWidth + 'px' : ''">
            <el-date-picker v-model="formModel[item.model]" type="date" :placeholder="item.placeholder" format="YYYY/MM/DD" value-format="YYYY-MM-DD" :style="{ width: item.width + 'px' }" />
          </el-form-item>
          <el-form-item :label="item.label + ':'" :label-width="item.labelWidth ? item.labelWidth + 'px' : ''" v-if="item.type === 'dateRange'" label-position="right">
            <el-date-picker v-model="formModel[item.model]" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" format="YYYY/MM/DD" value-format="YYYY-MM-DD" :style="{ width: item.width + 'px' }"></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row class="form-btn">
        <div class="form-fold" @click="clickFold" v-if="isShowFoldBtn">
          <span>{{ isShowFold ? '收起' : '展开' }}</span>
          <svg-icon :name="isShowFold ? 'top-s' : 'below-s'" size="12px"></svg-icon>
        </div>
        <div class="btn">
          <el-button @click="filter" size="mini" type="primary" class="search-btn">搜索</el-button>
          <el-button @click="reset" size="mini">重置</el-button>
        </div>
      </el-row>
    </el-form>
  </div>
</template>

<script setup>

import { defineProps, defineEmits, ref, onMounted } from 'vue'
const props = defineProps({
  formModel: {//存放model字段
    type: Object,
    default: () => { }
  },
  formLabel: {//存放label属性
    type: Array,
    default: () => []
  },
});


const isShowFold = ref(true)
const isShowFoldBtn = ref(false)

//box dom
const box = ref()

onMounted(() => {
  fold()
})


const emit = defineEmits(['filter', 'reset', 'eventCom']);


const fold = () => {
  isShowFoldBtn.value = false
  const originalHeight = box.value.$el.offsetHeight
  if (originalHeight > 70) {
    isShowFoldBtn.value = true
  }
}

const filter = () => {
  emit('filter');
};
const reset = () => {
  emit('reset');
}

const emitCom = (e, data) => {//公共的事件emit
  emit(`${e}`, data)
  emit('filter');
}

//点击展开收起事件
const clickFold = () => {
  isShowFold.value = !isShowFold.value
}






</script>

<style lang="scss" scoped>
.el-select-dropdown__list {
  .el-select-dropdown__item {
    font-size: 12px;
  }
}
.filters-com-container {
  padding: 0 20px;
  box-sizing: border-box;
  .search-form {
    width: 100%;
    border-bottom: 1px solid #e3e3e3;
    display: flex;

    .form-filters {
      padding: 20px 20px 0 0;
      flex-wrap: wrap !important;
      display: flex;
      flex: 1;
      :deep(.el-form-item__label) {
        line-height: 40px !important;
      }
      box-sizing: border-box;
    }

    :deep(.el-form-item) {
      margin-bottom: 10px;
      flex-wrap: wrap !important;
    }
    :deep(.el-date-editor .el-range-input) {
      font-size: 12px !important;
    }
    :deep(.el-date-editor .el-range-separator) {
      font-size: 12px !important;
    }
  }

  .form-btn {
    padding-top: 20px;
    align-self: flex-start;
    display: flex;
    .form-fold {
      width: 50px;
      display: flex;
      align-items: center;
      flex-wrap: nowrap;
      color: #00a2ff;
      font-size: 12px;
      height: 100%;
      cursor: pointer;
      height: 32px;
    }
    .btn {
      display: flex;
      align-items: flex-end;
      flex-wrap: nowrap;
    }
    .el-button {
      margin-left: 0;
    }
    .search-btn {
      margin-right: 12px;
    }
  }
  .hide {
    overflow: hidden;
    height: 70px !important;
  }
}
</style>
